﻿

@section css{
    <link href="~/Content/assets/global/plugins/jstree/themes/default/style.min.css" rel="stylesheet" />
}

<div class="page-content" style="min-height:345px">
    <div class="portlet box blue-hoki">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-gift"></i>功能管理
            </div>
        </div>
        <div class="portlet-body">
            <div class="row">
                
                <div class="col-md-3">
                    <div class="portlet box yellow">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fa fa-gift"></i>功能树
                            </div>
                            <div class="actions">
                                <a id="btnAddFunc" href="javascript:;" class="btn blue btn-sm">
                                    <i class="fa fa-plus"></i> 新增一级菜单
                                </a>
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div id="tree_1" class="tree-demo jstree jstree-1 jstree-default" role="tree" aria-activedescendant="j1_1">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9" id="funcShow">
                    
                </div>
            </div>
        </div>

    </div>
</div>

@section scripts{

    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script src="~/Content/assets/global/plugins/jstree/jstree.min.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <script type="text/javascript">

        $(function () {
            
            functionInfo.init();
        })

        var UITree = function () {

            var isloaded = false;
            var handleSample1 = function () {
                $('#tree_1').data('jstree', false);
                $('#tree_1').jstree();

                $('#tree_1').on('open_node.jstree', function (event,node) {
                    $("#tree_1 a.jstree-anchor").unbind("click", showFuncInfo)
                    $("#tree_1 a.jstree-anchor").on("click", showFuncInfo);
                });
            }

            var showFuncInfo = function () {
                var fid = $(this).attr("fid");
                var pfid = $(this).attr("pfid");
                functionInfo.getFuncInfo(fid, pfid);
            }

            return {
                init: function () {
                    handleSample1();
                }

            };

        }();

        var functionInfo = (function () {

            var actions = {
                list:'@Url.Action("AjaxGetAllFunctions", "Function")',
                detail: '@Url.Action("AjaxGetFuncEditDTO", "Function")',
                edit: '@Url.Action("AjaxAddOrEditFunction", "Function")',
                remove: '@Url.Action("AjaxDeleteFunction", "Function")',
            }

            var addOrEditFunc = function () {
                var data = $("#form_sample_1").serialize();

                Metronic.ajax(
                        {
                            url: actions.edit,
                            data: data,
                            elem: true,
                        }).done(function () {
                            $('#funcShow').html('');
                            getFuncList();
                        });
            }

            var getFuncInfo = function (fid, pfid) {
                Metronic.blockUI({
                    animate: true
                });
                $.post(actions.detail, { funcid: fid, parentid:pfid }, function (result) {
                    $('#funcShow').html(result);
                    bindDetailElement();
                    Metronic.unblockUI();
                })
            }

            var deleteFunc = function (fid) {
                Metronic.ajax(
                        {
                            url: actions.remove,
                            data: { funcid: fid },
                            elem: true,
                        }).done(function () {
                            getFuncList();
                        });
            }

            var bindDetailElement = function () {
                $('#btnAddChildFunc').on('click', function () {
                    var fid = $(this).attr('fid');
                    getFuncInfo(0, fid);
                });

                $('#btnSubmit').on('click', function () {
                    addOrEditFunc();
                });

                $('#btnCancel').on('click', function () {
                    $('#funcShow').html('');
                });

                $('#btnRemove').on('click', function () {
                    var fid = $(this).attr('fid');
                    deleteFunc(fid);
                });
            }

            var getFuncList = function () {
                Metronic.blockUI({
                    animate: true
                });
                $.post(actions.list, function (result) {
                    $('#tree_1').html(result);
                    UITree.init();

                    $("a.jstree-anchor").on('click', function () {
                        var fid = $(this).attr("fid");
                        var pfid = $(this).attr("pfid");
                        getFuncInfo(fid, pfid);
                    })
                    Metronic.unblockUI();
                });
            }

            return {
                init: function () {
                    getFuncList();

                    $('#btnAddFunc').on('click', function () {
                        getFuncInfo(0, 0);
                    });
                    
                },
                getFuncInfo: getFuncInfo
            }
        })();
        
    </script>
}


